<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/public/stylesheets/mui.min.css" />
    <link rel="stylesheet" href="/public/stylesheets/guahao.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/public/stylesheets/mui.picker.min.css"
    />
    <link href="/public/stylesheets/mui.poppicker.css" rel="stylesheet" />
    <title>Document</title>
    <style>
      .main {
        padding-top: 50px;
      }
      .mui-table-view {
        border-bottom: 10px solid #e8e8e8;
      }
      #my-submit {
        width: 100%;
        margin: 20px auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">挂号页面</h1>
    </header>
    <div class="main">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <span>姓名：<%- patientInfo.patient_name %></span>
        </li>
        <li class="mui-table-view-cell">
          <span>性别：XXX</span>
        </li>
      </ul>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <div id="showClinicPicker" class="">
            选择看病科室：
          </div>
        </li>
        <li class="mui-table-view-cell">
          <div id="clinicResult" class="ui-alert"></div>
        </li>
      </ul>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <div id="showDoctorPicker" class="">
            选择看病医生：
          </div>
        </li>
        <li class="mui-table-view-cell">
          <div id="doctorResult" class="ui-alert"></div>
        </li>
      </ul>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <div id="" class="">
            <div id="date">选择看病时间：</div>
          </div>
        </li>
        <li class="mui-table-view-cell">
          <div id="result" class="ui-alert"></div>
        </li>
      </ul>

      <div class="mui-btn mui-btn-primary" id="my-submit">
        提交
      </div>
    </div>

    <footer></footer>

    <script src="/public/javascripts/mui.min.js"></script>
    <script src="/public/javascripts/mui.picker.min.js"></script>
    <script src="/public/javascripts/mui.poppicker.js"></script>
    <script>
      ;(function ($, doc) {
        mui.getJSON('/mobile/guahao/pickdata', function (data) {
          $.init()
          $.ready(function () {
            const postData = {
              clinic_id: '',
              doctor_id: '',
              dateTime: '',
            }

            console.log(postData)

            //普通示例
            var clinicPicker = new $.PopPicker()
            var doctorPicker = new $.PopPicker()
            let { clinicPickerData, doctorPickerData } = data.data

            console.log(clinicPickerData)
            console.log(doctorPickerData)

            clinicPicker.setData(
              clinicPickerData.map(function (item) {
                return {
                  value: item.id,
                  text: item.name,
                }
              })
            )
            doctorPicker.setData(
              doctorPickerData.map(function (item) {
                return {
                  value: item.id,
                  text: item.name,
                }
              })
            )
            var showClinicPickerButton = doc.getElementById('showClinicPicker')
            var clinicResult = doc.getElementById('clinicResult')
            showClinicPickerButton.addEventListener(
              'tap',
              function (event) {
                clinicPicker.show(function (items) {
                  clinicResult.innerText = JSON.stringify(items[0])

                  // 写入post数据
                  postData.clinic_id = items[0].value
                  //返回 false 可以阻止选择框的关闭
                  //return false;
                })
              },
              false
            )
            var showDoctorPickerButton = doc.getElementById('showDoctorPicker')
            var doctorResult = doc.getElementById('doctorResult')
            showDoctorPickerButton.addEventListener(
              'tap',
              function (event) {
                doctorPicker.show(function (items) {
                  doctorResult.innerText = JSON.stringify(items[0])

                  // 写入post数据
                  postData.doctor_id = items[0].value
                  //返回 false 可以阻止选择框的关闭
                  //return false;
                })
              },
              false
            )

            // 时间选择
            const dtPicker = new $.DtPicker({
              type: 'datetime',
            })

            // console.log(dtPicker)

            var btn = document.querySelector('#date')
            var result = document.querySelector('#result')

            // 监听日期选择点击事件
            btn.addEventListener(
              'tap',
              function () {
                dtPicker.show(function (selectItems) {
                  console.log(selectItems)
                  result.innerHTML = selectItems.value

                  // 写入post数据
                  postData.dateTime = selectItems.value
                })
              },
              false
            )

            // 汇总数据，发送post请求
            const my_submit = document.querySelector('#my-submit')
            my_submit.addEventListener('click', function () {
              $.ajax('/mobile/guahao', {
                data: postData,
                type: 'POST', //HTTP请求类型
                success: function (data) {
                  if (data.code === 0) {
                    $.alert('提交成功', '系统信息', function () {
                      window.location.href = '/mobile'
                    })
                  }
                },
                error: function (xhr, type, errorThrown) {
                  //异常处理；
                  console.log(type)
                },
              })
            })
          })
        })
      })(mui, document)
    </script>
  </body>
</html>
